import BaseLayout from '@/layouts/BaseLayout/BaseLayout'
import Case1 from './Case1';
import Case2 from './Case2';
import Case3 from './Case3';
import Case4 from './Case4';
import Case5 from './Case5';
import Case6 from './Case6';

function Demo() {
	const list1 = [{
		val1: 'className',
		val2: '分割线样式类',
		val3: 'string',
		val4: '--',
	},{
		val1: 'defaultValue',
		val2: '输入框默认内容',
		val3: 'string',
		val4: '--',
	},{
		val1: 'addonAfter',
		val2: '带标签的 input，设置后置标签',
		val3: 'ReactNode',
		val4: '--',
	},{
		val1: 'addonBefore',
		val2: '带标签的 input，设置前置标签',
		val3: 'ReactNode',
		val4: '--',
	},{
		val1: 'prefix',
		val2: '带有前缀图标的 input',
		val3: 'ReactNode',
		val4: '--',
	},{
		val1: 'suffix',
		val2: '带有后缀图标的 input',
		val3: 'ReactNode',
		val4: '--',
	},{
		val1: 'maxLength',
		val2: '最大长度',
		val3: 'number',
		val4: '--',
	},{
		val1: 'disabled',
		val2: '是否禁用状态，默认为 false',
		val3: 'boolean',
		val4: 'false',
	},{
		val1: 'allowClear',
		val2: '可以点击清除图标删除内容',
		val3: 'boolean',
		val4: '--',
	},{
		val1: 'bordered',
		val2: '是否有边框',
		val3: 'boolean',
		val4: 'true',
	}];
	list1.sort((a:any, b:any) => {
		return a.val1.localeCompare(b.val1);
	});
	const list2 = [{
		val1: 'onChange',
		val2: '输入框内容变化时的回调',
		val3: 'function(e)',
		val4: '--',
	},{
		val1: 'onPressEnter',
		val2: '按下回车的回调',
		val3: 'function(e)',
		val4: '--',
	}];
	list2.sort((a:any, b:any) => {
		return a.val1.localeCompare(b.val1);
	});

	return (
		<BaseLayout>
		    <h2 className="intro-title">Input输入框</h2>
		    <p className="intro-content">通过鼠标或键盘输入内容，是最基础的表单域的包装。</p>
			
			<h3 className="show-case-title">代码演示</h3>

			{/*演示*/}
			<Case1></Case1>
			<Case2></Case2>
			<Case3></Case3>
			<Case4></Case4>
			<Case5></Case5>
			<Case6></Case6>

		    {/*介绍*/}
			<h3 className="base-title">API</h3>
			<h4 className="base-title">Input</h4>
			<table className="attri-table">
				<thead>
					<tr>
						<th>参数</th>
						<th>说明</th>
						<th>类型</th>
						<th>默认值</th>
					</tr>
				</thead>
				<tbody>
				    {list1.map((item:any) => {
				    	return (<tr key={item.val1}>
							<td>{item.val1}</td>
							<td>{item.val2}</td>
							<td>{item.val3}</td>
							<td>{item.val4}</td>
						</tr>);
				    })}
				    {list2.map((item:any) => {
				    	return (<tr key={item.val1}>
							<td>{item.val1}</td>
							<td>{item.val2}</td>
							<td>{item.val3}</td>
							<td>{item.val4}</td>
						</tr>);
				    })}
				</tbody>
			</table>
		</BaseLayout>
	)
}

export default Demo
